@use 'sass:map';
@use '@angular/material' as mat;

$toolbar-height: 50px;
$ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1);

@mixin color($theme) {
  $config: mat.get-color-config($theme);

  $primary-palette: map.get($config, 'primary');
  $accent-palette: map.get($config, 'accent');
  $background: map.get($config, background);
  $foreground: map.get($config, foreground);

  // Story widget page
  .ngm-story-widget.pac-story-widget-viewer {
    background-color: mat.get-color-from-palette($background, background);
    color: mat.get-color-from-palette($foreground, text);
  }
  // Story point page
  .pac-story-point-viewer {
    background-color: mat.get-color-from-palette($background, background);
    color: mat.get-color-from-palette($foreground, text);
  }
  
  .pac-story-designer__copilot-popper {
    .ngxp__arrow {
      right: 100px;
    }
  }
}

@mixin typography($theme) {
}

@mixin density($config-or-theme) {
  .pac-story-designer {
    formly-field {
      font-size: 12px;
    }
    .metad-formly__panel-wrapper {
      margin: 0;
      .metad-formly__title {
        @apply text-base;
      }
    }
  }
}

@mixin theme($theme) {
  $color: mat.get-color-config($theme);
  $density: mat.get-density-config($theme);
  $typography: mat.get-typography-config($theme);

  @if $color != null {
    @include color($color);
  }
  @if $density != null {
    @include density($density);
  }
  @if $typography != null {
    @include typography($typography);
  }
}
